<template>
	<div class='container-padding' v-if="orderDetail != null">
		<nav-header></nav-header>
		<div>
			<div class='page-header'>
				<span class='title'>订单详情</span>
				<img class="server-avatar" src="https://yami.yamichefs.cn/yaminew/app/admin/yami/Uploads/service/5bbd6c54293a0.jpg" />
			</div>
			<chat-type class="chat-type"></chat-type>
			<div class="container">
				<div class='goods-order-list'>
					<goods-order-item></goods-order-item>
				</div>
				<!--收货地址  -->
				<div class='addres-info'>
					<div class='address-header'>
						<span class='title'>收货地址</span>
					</div>
					<div class='address-body'>
						<div class='user-relation'>
							<span class='user-name'>{{orderDetail.address.reciver_name}}</span>
							<span class='user-phone'>{{orderDetail.address.reciver_phone}}</span>
						</div>
						<div class='user-address'>
							<span class='address-details'>{{orderDetail.address.reciver_region}}</span>
							<span class='address-details'>{{orderDetail.address.reciver_address}}</span>
						</div>
					</div>
				</div>
				<!-- 商品价格属性 -->
				<div class='panel-container'>
					<div class='panel-header'>
						<span class='title'>商品总价</span>
						<span class='price'>{{orderDetail.goods_amount?orderDetail.goods_amount:orderDetail.items_amount}}元</span>
					</div>
					<div class='panel-body'>
						<div class='item'>
							<div class='title'>运费</div>
							<div class='title'>{{orderDetail.sprice}}元</div>
						</div>
						<!-- <view class='item'>
	        <view class='title'>金牌会员优惠</view>
	        <view class='title'>900元</view>
	      </view> -->
						<!-- <view class='item'>
	        <view class='title'>优惠券抵扣</view>
	        <view class='title'>900元</view>
	      </view> -->
					</div>
				</div>
				<div class='panel-container'>
					<div class='panel-header'>
						<span class='title'>实际支付</span>
						<span class='price'>{{orderDetail.order_amount}}元</span>
					</div>
					<div class='panel-body'>
						<div class='item'>
							<div class='title'>订单编号</div>
							<div class='title'>{{orderDetail.all_no}}</div>
						</div>
						<div class='item'>
							<div class='title'>下单时间</div>
							<div class='title'>{{orderDetail.add_time}}</div>
						</div>
						<div class='item'>
							<div class='title'>支付方式</div>
							<div class='title'>{{orderDetail.payment_code}}</div>
						</div>
					</div>
				</div>
				<div v-if='orderDetail.order_label != 1'>
					<router-link class='apply-btn' v-if="orderDetail.refund_state == 0 " to="/applyRefund">
						<span>申请退款</span>
					</router-link>
					<div class='apply-btn' v-else-if="orderDetail.refund_state == 3 ">
						<span>申请中</span>
					</div>
					<div class='apply-btn' v-else>
						<span>已退款</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
	import goodsOrderItem from "@/pages/order-detail/components/goods-order-item"
	import header from "@/components/header/header"
	import chatType from '@/components/chat-type/chat-type'
	export default {
		data() {
			return {
				value: false
			}
		},
		computed: {
			...mapState(['orderDetail'])
		},
		components: {
			"nav-header": header,
			"goods-order-item": goodsOrderItem,
			"chat-type": chatType
		},
		mounted() {},
		created() {
			let order_label = this.$route.params.order_label;
			let param = {
				order_label: order_label,
				member_id: 101076
			}
			if(this.$route.params.all_no.substring(0, this.$route.params.all_no.indexOf("=")) == "order_id") {
				param.order_id = this.$route.params.all_no.substring(this.$route.params.all_no.indexOf("=") + 1, this.$route.params.all_no.length);

			} else {
				param.all_no = this.$route.params.all_no.substring(this.$route.params.all_no.indexOf("=") + 1, this.$route.params.all_no.length);
			}
			if(order_label == 1 || order_label == 2 || order_label == 3) {
				this.getOrderDetail(param);
			} else {
				this.getOrderDetailOther(param);
			}
		},
		methods: {
			...mapActions(['getOrderDetail', "getOrderDetailOther"])
		}
	}
</script>

<style scoped>
	.chat-type {
		height: 600px;
		padding: 0 40px 0;
	}
	/* pages/template/order-info/order-info.wxss */
	
	.container {
		padding: 0 40px;
	}
	
	.page-header {
		margin-top: 90px;
		display: flex;
		justify-content: space-between;
		padding: 0 40px 32px;
		background-color: #fff;
		box-shadow: 0 72px 200px 0 rgba(0, 0, 0, 0.08);
	}
	
	.page-header .title {
		font-size: 48px;
		color: #000;
	}
	
	.page-header .server-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}
	
	.order-datils-container {
		padding: 0 40px 40px;
		background-color: #fff;
	}
	
	.order-datils-container .order-title {
		display: block;
		font-size: 48px;
		color: #262628;
		padding-bottom: 30px;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.order-datils-container .goods-total {
		display: flex;
		justify-content: space-between;
		padding: 50px 0;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.order-datils-container .goods-total .goods-content {
		display: flex;
		flex-direction: column;
		width: 440px;
		margin-right: 30px;
	}
	
	.order-datils-container .goods-total .title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 50px;
		font-size: 36px;
		color: #4a4a4a;
		margin-bottom: 6px;
	}
	
	.order-datils-container .goods-total .sub-title {
		margin-bottom: 16px;
		font-size: 32px;
		color: #8A8A8A;
	}
	
	.order-datils-container .goods-total .goods-price {
		font-size: 30px;
		color: #8A8A8A;
	}
	
	.order-datils-container .goods-total .goods-thumb {
		flex-shrink: 0;
		width: 154px;
		height: 130px;
		border-radius: 8px;
	}
	
	.add-address-title {
		font-size: 40px;
		color: #4A4A4A;
	}
	
	.icon-triangle {
		width: 18px;
		height: 24px;
	}
	
	.addres-info {
		padding: 40px 0;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.addres-info .address-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 16px;
	}
	
	.address-header .title {
		line-height: 48px;
		font-size: 36px;
		color: #4A4A4A;
	}
	
	.addres-info .address-header .change-btn {
		color: #ef364e;
		font-size: 28px;
		line-height: 48px;
		padding-left: 30px;
	}
	
	.user-relation {
		display: flex;
		align-items: center;
		height: 48px;
		margin-bottom: 6px;
		font-size: 32px;
		color: #747474;
	}
	
	.user-relation .user-name {
		margin-right: 40px;
		font-size: 32px;
		color: #747474;
	}
	
	.address-details {
		display: block;
		line-height: 48px;
		font-size: 28px;
		color: #747474;
	}
	
	.panel-container {
		padding: 30px 0;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.panel-container .panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 48px;
		margin-bottom: 18px;
	}
	
	.panel-header .title {
		font-size: 36px;
		color: #4a4a4a;
	}
	
	.panel-header .price {
		font-size: 36px;
		color: #67666B;
	}
	
	.panel-container .panel-body .item {
		display: flex;
		justify-content: space-between;
		height: 48px;
		margin-bottom: 16px;
	}
	
	.panel-container .panel-body .title {
		font-size: 30px;
		color: #8A8A8A;
	}
	
	.apply-btn {
		display: block;
		height: 92px;
		margin-top: 50px;
		margin-bottom: 60px;
		border: 2px solid #e5e5e4;
		border-radius: 8px;
		font-size: 36px;
		color: #4a4a4a;
		text-align: center;
		line-height: 92px;
	}
	
	.order-place-colum {
		display: flex;
		flex-direction: column;
		padding: 30px 0;
		border-bottom: 1px solid #dcdcdc;
	}
	
	.month-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70px;
		padding-left: 50px;
	}
	
	.month-item::after {
		position: absolute;
		top: 28px;
		left: 0;
		width: 10px;
		height: 10px;
		border: 1px solid #979797;
		border-radius: 50%;
		content: "";
	}
	
	.month-item .sub-month-info {
		color: #67666b;
		font-size: 28px;
		padding-right: 15px;
	}
	
	.go-logistics {
		width: 128px;
		height: 48px;
		border: 1px solid #e6e6e6;
		margin-left: 15px;
		font-size: 28px;
		text-align: center;
		line-height: 48px;
	}
</style>